<!-- campusCardManagement.vue -->
<script setup>
    import { ref, onMounted, onUnmounted } from 'vue'

    // 在script setup部分添加以下代码
    const showUserManagement = ref('') // 默认显示用户管理页面

    // 当前显示的页面（根据URL参数决定）
    const currentPage = ref('campusCardManagement') // 默认显示用户管理页面

    // 强制重新加载页面（确保跳转生效）
    const reloadForRedirect = () => {
        window.location.reload() // 关键点：强制刷新页面
    }

    // 切换页面的函数
    const switchPage = (pageName) => {
        // 更新URL（会触发页面刷新）
        window.location.href = window.location.pathname + `?page=${pageName}`
    }

    // 初始化时检查URL参数
    onMounted(() => {
        const urlParams = new URLSearchParams(window.location.search)
        currentPage.value = urlParams.get('page') || 'userManagement'
    })

    // 校园卡数据
    const cards = ref([
        { cardId: '10001', userName: '张三', balance: 150, status: 'active', department: '计算机学院' },
        { cardId: '10002', userName: '李四', balance: 30, status: 'lost', department: '电子工程学院' }
    ])

    // 操作表单
    const operationForm = ref({
        cardId: '',
        amount: 100,
        operationType: 'recharge' // recharge | loss | unloss | cancel
    })

    // 执行校园卡操作
    const handleOperation = () => {
        const card = cards.value.find(c => c.cardId === operationForm.value.cardId)
        if (!card) return alert('卡号不存在')

        switch (operationForm.value.operationType) {
            case 'recharge':
                card.balance += Number(operationForm.value.amount)
                alert(`卡号 ${card.cardId} 充值成功`)
                break
            case 'loss':
                card.status = 'lost'
                alert(`卡号 ${card.cardId} 已挂失`)
                break
            case 'unloss':
                card.status = 'active'
                alert(`卡号 ${card.cardId} 已解挂`)
                break
            case 'cancel':
                cards.value = cards.value.filter(c => c.cardId !== card.cardId)
                alert(`卡号 ${card.cardId} 已注销`)
                break
        }
    }
</script>

<template>
    <div class="campus-card-management">
        <h2><icon-idcard /> 校园卡管理系统</h2>

        <div style="margin-bottom: 20px;">
            <el-button type="primary" @click="switchPage('userManagement')" style="margin-right: 10px;" plain>
                用户管理
            </el-button>
            <el-button type="primary" @click="switchPage('vendingMachine')" style="margin-right: 10px;" plain>
                自动售货机
            </el-button>
        </div>

        <!-- 校园卡列表 -->
        <div class="card-list">
            <div v-for="card in cards" :key="card.cardId" :class="['campus-card', card.status]">
                <div class="card-header">
                    <span class="card-id">{{ card.cardId }}</span>
                    <span class="card-status">{{
                        { active: '正常', lost: '挂失' }[card.status]
                        }}</span>
                </div>
                <div class="card-body">
                    <p><span>姓名：</span>{{ card.userName }}</p>
                    <p><span>院系：</span>{{ card.department }}</p>
                    <p><span>余额：</span>¥{{ card.balance.toFixed(2) }}</p>
                </div>
            </div>
        </div>

        <!-- 校园卡操作面板 -->
        <div class="operation-panel">
            <h3><icon-setting /> 卡务操作</h3>
            <form @submit.prevent="handleOperation">
                <div class="form-row">
                    <label>卡号：</label>
                    <input v-model="operationForm.cardId" placeholder="输入校园卡号" required />
                </div>

                <div class="form-row" v-if="operationForm.operationType === 'recharge'">
                    <label>金额：</label>
                    <input v-model.number="operationForm.amount" type="number" min="1" required />
                </div>

                <div class="form-row">
                    <label>操作：</label>
                    <select v-model="operationForm.operationType">
                        <option value="recharge">充值</option>
                        <option value="loss">挂失</option>
                        <option value="unloss">解挂</option>
                        <option value="cancel">注销</option>
                    </select>
                </div>

                <button type="submit" class="confirm-btn">
                    {{ {
                    recharge: '确认充值',
                    loss: '确认挂失',
                    unloss: '确认解挂',
                    cancel: '确认注销'
                    }[operationForm.operationType] }}
                </button>
            </form>
        </div>
    </div>
</template>

<style scoped>
    .campus-card-management {
        max-width: 900px;
        margin: 0 auto;
        padding: 20px;
    }

    /* 校园卡样式 */
    .campus-card {
        margin-bottom: 15px;
        padding: 15px;
        border-radius: 8px;
        background: white;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        border-left: 4px solid #42b983;
    }

    .campus-card.lost {
        border-left-color: #ff4d4f;
        background-color: #fff2f0;
    }

    .card-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        font-weight: bold;
    }

    .card-status {
        color: #ff4d4f;
    }

    .campus-card.active .card-status {
        color: #52c41a;
    }

    /* 操作面板样式 */
    .operation-panel {
        margin-top: 30px;
        padding: 20px;
        background: #f8f9fa;
        border-radius: 8px;
    }

    .form-row {
        margin-bottom: 15px;
        display: flex;
        align-items: center;
    }

    .form-row label {
        width: 80px;
        text-align: right;
        padding-right: 10px;
    }

    .form-row input,
    .form-row select {
        flex: 1;
        padding: 8px;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
    }

    .confirm-btn {
        display: block;
        width: 100%;
        padding: 10px;
        background: #1890ff;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    .confirm-btn:hover {
        opacity: 0.8;
    }
</style>